<template>
	<view class="container">
		<view class="main-content-frequency">
			<!-- Option Buttons -->
			<view class="options">
				<view class="options-left">
					<text class="distance">{{ verticalDistance }}px</text>
					<text>上下位置</text>
				</view>

				<view ref="dragArea" class="slider-container">
					<!-- angle-bg.png as background -->
					<image src="https://wq.hoeagri.com/static/angle-bg.png" class="bg-image"></image>

					<!-- Up, down, left, right arrows -->
					<image src="/static/angle-up.png" class="points-image up-arrow arrow-up"></image>
					<image src="/static/angle-down.png" class="points-image down-arrow arrow-down"></image>
					<image src="/static/angle-left.png" class="points-image left-arrow arrow-left"></image>
					<image src="/static/angle-right.png" class="points-image right-arrow arrow-right"></image>

					<!-- Ball (draggable and displays position distance) -->
					<image src="/static/angle-ball.png" class="points-image ball"
						:style="{ top: positionY + 'rpx', left: positionX + 'rpx' }" mode="widthFix"
						@touchstart="onDragStart" @touchmove="onDragMove" @touchend="onDragEnd">
					</image>
				</view>

				<view class="right-column">
					<view class="options-text">
						<text class="distance">{{ horizontalDistance }}px</text>
						<text>左右位置</text>
					</view>
				</view>
			</view>
		</view>

		<!-- Start Button at the bottom right -->
		<view class="start-column-frequency" @click="startGame">
			<button class="start-button" >开始/结束</button>
			<image src="/static/start.png" alt="Start Icon" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				positionX: 125, // 初始左右位置
				positionY: 125, // 初始上下位置
				startX: 0, // 触摸起始的X
				startY: 0, // 触摸起始的Y
				dragAreaWidth: 415, // 可拖动区域宽度（调整以匹配实际需求）
				dragAreaHeight: 415, // 可拖动区域高度
				buttonSize: 200, // 按钮的大小
			};
		},
		onLoad() {
			this.loadFrequencyFromLocal(); // 页面加载时读取本地存储
		},
		computed: {		
			verticalDistance() {
				this.saveFrequencyToLocal();
				return Math.round(this.positionY);
			},
			horizontalDistance() {
				this.saveFrequencyToLocal()
				return Math.round(this.positionX);
			},
		},
		// mounted() {
		// 	// 确保组件渲染后获取尺寸
		// 	this.$nextTick(() => {
		// 		const query = uni.createSelectorQuery().in(this);
		// 		query.select('.dragArea').boundingClientRect((rect) => {
		// 			console.log('Element width:', rect.width);
		// 			console.log('Element height:', rect.height);
		// 		}).exec();
		// 	});
		// },
		methods: {
			startGame() {
				let ctrlMachine = uni.getStorageSync("ctrlMachine");
				console.log(ctrlMachine)
				// 开始游戏的逻辑
				this.$api.post({
					url: '/common/ctrlMachine',
					loadingTip: '加载中...',
					data: {
						ctrlMachine
					},
					success: res => {
						console.log(res)
					}
				});
			},
			// 将频率值存储到本地
			saveFrequencyToLocal() {
				let existingData = uni.getStorageSync('ctrlMachine') || {};
				existingData.positionX = Math.round(this.positionX)
				existingData.positionY = Math.round(this.positionY)
				uni.setStorageSync('ctrlMachine', existingData);
			},
			
			// 从本地读取频率值
			loadFrequencyFromLocal() {
				const storedFrequency = uni.getStorageSync('ctrlMachine');
				if (storedFrequency !== '' && storedFrequency !== undefined) {					
					this.positionX = storedFrequency.positionX
					this.positionY = storedFrequency.positionY
				}
			},
			// 拖动开始
			onDragStart(e) {
				this.startX = e.touches[0].clientX - this.positionX;
				this.startY = e.touches[0].clientY - this.positionY;
			},
			// 拖动中
			onDragMove(e) {
				let newX = e.touches[0].clientX - this.startX;
				let newY = e.touches[0].clientY - this.startY;

				// 限制按钮在拖动区域内
				newX = Math.max(0, Math.min(this.dragAreaWidth - this.buttonSize, newX));
				newY = Math.max(0, Math.min(this.dragAreaHeight - this.buttonSize, newY));

				this.positionX = newX;
				this.positionY = newY;
			},
			// 拖动结束
			onDragEnd() {
				console.log("当前位置：", this.positionX, this.positionY);
			}
		},
	};
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #000;
		color: #fff;
		width: 100%;
		height: 100vh;
		/* 确保占满视窗高度 */
		overflow: hidden;
		/* 禁止页面滚动 */
		padding-top: env(safe-area-inset-top);
		padding-bottom: env(safe-area-inset-bottom);
		touch-action: none;
		/* 禁止手势引起页面滚动 */
	}

	.main-content-frequency {
		display: flex;
		justify-content: space-between;
		width: 350px;
		margin-bottom: 233px;
	}

	.options {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
	}

	.options-left {
		margin: 50px 50px 10px 50px;

		.distance {
			margin-right: 5px;
			padding: 5px;
			width: 73rpx;
			height: 36rpx;
			line-height: 36rpx;
			background: #FFFFFF;
			border-radius: 17rpx;
			color: #65C61D;
		}
	}

	.slider-container {
		margin-top: 21rpx;
		width: 415rpx;
		height: auto;
		aspect-ratio: 1;
		position: relative;

		.arrow-up {
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
		}

		.arrow-down {
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
		}

		.arrow-left {
			position: absolute;
			left: 0%;
			top: 50%;
			transform: translateY(-50%);
		}

		.arrow-right {
			position: absolute;
			right: 0%;
			top: 50%;
			transform: translateY(-50%);
		}

		.left-arrow,
		.right-arrow {
			width: 40rpx;
			height: 66rpx;
			margin-left: 25rpx;
			margin-right: 25rpx;
		}

		.up-arrow,
		.down-arrow {
			width: 66rpx;
			height: 40rpx;
			margin-top: 25rpx;
			margin-bottom: 25rpx;
		}
	}

	.right-column {
		position: absolute;
		bottom: 478rpx;
		right: 20px;
		display: flex;
		flex-direction: column;
		align-items: center;

		.options-text {
			margin: 10px;
			font-weight: 400;
			font-size: 28rpx;

			.distance {
				margin-right: 5px;
				padding: 5px;
				width: 73rpx;
				height: 36rpx;
				line-height: 36rpx;
				background: #FFFFFF;
				border-radius: 17rpx;
				color: #65C61D;
			}
		}
	}

	.bg-image {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.points-image {
		position: absolute;
		z-index: 10;
		cursor: pointer;
	}

	.ball {
		width: 44rpx;
		height: 44rpx;
	}

	.start-column-frequency {
		position: absolute;
		bottom: 0;
		right: 61rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.start-button {
		width: 100%;
		border-radius: 10px;
		background-color: transparent;
		color: #FFFFFF;
		font-size: 36rpx;
		text-align: center;
		border: none;
		transition: all 0.3s ease;
	}

	.start-button:hover {
		cursor: pointer;
	}

	.start-button:focus {
		outline: none;
	}

	image {
		width: 182rpx;
		height: 182rpx;
	}
</style>